<!DOCTYPE html>
<!-- （1）当页面加载完成功后显示用户列表；

（2）用户新增；

（3）选中"序号"才能用户编辑或者删除；

（4）可以根据用户工号和名称查询（不考虑模糊查询、使用完整的工号和名称） -->
<html lang="en">
<head>
    <!-- 当页面加载完成功后显示用户列表 -->
    <script>
        document.onreadystatechange = function() {
            if(document.readyState == "complete") {
                document.querySelector("#userTable").style.visibility="visible";
            }else {
                document.querySelector("#userTable").style.visibility="hidden";
            }
        }
    </script>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body style="padding: 20px;">
    <div >
        <div style="margin: 20px;"> 
            <button class="btn btn-info" id="add">新增</button>
            <button class="btn btn-info" id="del">删除</button>
            <button class="btn btn-info" id="set">编辑</button>
            <button class="btn btn-info" id="que">查询</button>
            <input id="eid" type="text" placeholder="按工号查询" style="width: 80px;">
            <input id="name" type="text" placeholder="按姓名查询" style="width: 80px;">
        </div>
        <div id="userTable">
            <table class="table table-responsive">
                <thead class="h">
                    <th>序号</th>
                    <th>工号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>密码</th>
                    <th>年龄</th>
                    <th>出生日期</th>
                </thead>
                <tr class="info">
                    <td><input type="checkbox">&nbsp;</td>
                    <td>1001</td>
                    <td>张三</td>
                    <td>女</td>
                    <td>1234</td>
                    <td>29</td>
                    <td>1991-1-1</td>
                </tr>
                <tr class="warning">
                    <td><input type="checkbox">&nbsp;</td>
                    <td>1002</td>
                    <td>李四</td>
                    <td>男</td>
                    <td>1234</td>
                    <td>28</td>
                    <td>1992-2-2</td>
                </tr>
                <tr class="info">
                    <td><input type="checkbox">&nbsp;</td>
                    <td>1003</td>
                    <td>王五</td>
                    <td>女</td>
                    <td>1234</td>
                    <td>27</td>
                    <td>1993-3-3</td>
                </tr>
                <tr class="warning">
                    <td><input type="checkbox">&nbsp;</td>
                    <td>1004</td>
                    <td>赵六</td>
                    <td>女</td>
                    <td>1234</td>
                    <td>26</td>
                    <td>1994-4-4</td>
                </tr>
            </table>
        </div>
    </div>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        // flag用于控制单个按键有效
        var flag = 0;
        // 查询时将所有数据保存下来
        var dataArr = [];
        // 新增按钮功能实现 在表最后添加一个确认按钮 和六个输入框用于数据输入
        $("#add").click(function() {
            $(this).blur();
            if(flag == 0) {
                var addTemp = $("<tr class='success'></tr>");
                // 用户输入完数据后点击 新增 按钮进行添加
                addTemp.append($("<td><button class='btn btn-primary' onclick='addR()'>确认</button></td>"));
                addTemp.append($("<td><input type='text' class='form-control' placeholder='请输入工号'></td>"));
                addTemp.append($("<td><input type='text' class='form-control' placeholder='请输入姓名'></td>"));
                addTemp.append($("<td><input type='text' class='form-control' placeholder='请输入性别'></td>"));
                addTemp.append($("<td><input type='text' class='form-control' placeholder='请输入密码'></td>"));
                addTemp.append($("<td><input type='text' class='form-control' placeholder='请输入年龄'></td>"));
                addTemp.append($("<td><input type='text' class='form-control' placeholder='例：2000-1-1'></td>"));
                $("table").append(addTemp);
                flag = 1;
            }
        });
        // 确认按钮功能实现 将输入框内容放入表格中，去掉输入框
        function addR() {
            var textArr = $("tr:last");
            var nTr = $("<tr class=''></tr>");
            nTr.append($("<td><input type='checkbox'></td>"));
            for(var i = 1; i < 7; i++) {
                nTr.append($("<td>"+textArr.children(`td:eq(${i})`).children().val()+"</td>"));
            }
            textArr.replaceWith(nTr);
            nTr.attr("class", $("tr").length % 2 == 0 ? "info" : "warning");
            flag = 0;
        }
        // 确认和修改按钮快捷键
        $(document).keyup(function(event) {
            if(event.keyCode == 13 & flag == 1) {
                addR();
            }
            if(event.keyCode == 13 & flag == 2) {
                setR();
            }
        });
        // 删除按钮功能实现 逐行比对 CheckBox是否被选中 选中则使用remove将其删除
        $("#del").click(function() {
            if(flag != 0) {
                return;
            }
            var delArr = new Array();
            for(var i = 1; i < $("tr").length; i++) {
                if($(`tr:eq(${i})`).children("td:first").children().is(":checked")) {
                    delArr.push($(`tr:eq(${i})`));
                }
            }
            // 在获取是否为选中行时删除会影响到序号，致使原来排序靠后的行无法删除
            $(delArr).each(function(i, val) {
                val.remove();
            });
            $("tr:even").attr("class", "warning");
            $("tr:odd").attr("class", "info");
            $("tr:first").attr("class", "");
        });
        // 编辑按钮功能实现 与新增功能类似 不同在于 在原位置将内容替换成输入框，内容为输入框value值
        $("#set").click(function() {
            if(flag != 0) {
                return;
            }
            // 逐行对比，获取第一个被选中的框所在行
            var fn = function(){
                for(var i = 1; i < $("tr").length; i++) {
                    if($(`tr:eq(${i})`).children("td:eq(0)").children().is(":checked")) {
                        return $(`tr:eq(${i})`);
                    }
                }
            }
            var sGoal = fn();
            setTemp = $(`<tr class=${sGoal.attr("class")}></tr>`);
            setTemp.append($(`<td><button class='btn btn-primary' onclick='setR()'>修改</button></td>`));
            for(var i = 1; i < 7; i++) {
                setTemp.append($(`<td><input type='text' class='form-control' value=${sGoal.children(`td:eq(${i})`).text()}></td>`));
            }
            sGoal.replaceWith(setTemp);
            flag = 2;
        });
        // 修改按钮功能实现 将输入框value值放入表格中 用内容替换输入框
        function setR() {
            var nTr = $(`<tr class=${setTemp.attr("class")}></tr>`);
            nTr.append($("<td><input type='checkbox'></td>"));
            for(var i = 1; i < 7; i++) {
                nTr.append($("<td>"+setTemp.children(`td:eq(${i})`).children().val()+"</td>"));
            }
            setTemp.replaceWith(nTr);
            flag = 0;
        }
        // 查询按钮功能实现 逐行对比 符合查询条件的对象存入数组中 将除表头外行替换为符合条件的行  恢复时则将存在dataArr中的所有行替换符合条件行
        $("#que").click(function() {
            if(flag != 0 & flag != 3) {
                return;
            }
            // 条件输入框内容
            var eid = $("#eid").val();
            var name = $("#name").val();
            // 两条件输入框都为空时，将符合条件行替换回存在dataArr中的所有行
            if($("#eid").val() == "" & $("#name").val() == "") {
                if(dataArr == "") {
                    return;
                }
                $("tr[class*='i']").remove();
                for(var i = 0; i < dataArr.length; i++) {
                    $("table").append(dataArr[i]);
                }
                dataArr = [];
                flag = 0;
                return;
            }
            if(flag == 0) {
                // 逐行对比 符合查询条件的对象存入数组中
                var tArr = new Array();
                for(var i = 1; i < $("tr").length; i++) {
                    dataArr.push($(`tr:eq(${i})`));
                    if($(`tr:eq(${i})`).children("td:eq(1)").text() == eid | $(`tr:eq(${i})`).children("td:eq(2)").text() == name) {
                        tArr.push($(`tr:eq(${i})`));
                    }
                }
                // 将除表头外行替换为符合条件的行
                $("tr[class*='i']").remove();
                for(var i = 0; i < tArr.length; i++) {
                    $("table").append(tArr[i]);
                }
                flag = 3;
            }
        });
    </script>
</body>
</html>